<template>
  <div id="salvenote">
    <div class="page-header" style="height: 5%">
      <span class="title-item">申领记录</span>
      <!-- <span class="download-btn">
        <a-icon type="cloud-download" />导出数据
      </span> -->
    </div>
    <a-form-model layout="inline" :model="page" @submit="handleSubmit" @submit.native.prevent :colon="false" style="margin-bottom: 12px">
      <a-form-model-item label="关键字">
        <a-input v-model="page.searchKey" placeholder="请输入物资名称/型号" />
      </a-form-model-item>
      <a-form-model-item label="审核状态">
        <a-select v-model="page.status" style="width: 180px" allowClear placeholder="请选择审核状态">
          <a-select-option value="0">未审核</a-select-option>
          <a-select-option value="1">审核未通过</a-select-option>
          <a-select-option value="2">审核通过</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="table-form">
      <my-table style="min-height: 92%" :rowKey="(record) => record.id" :columns="columns" :data-source="data" :pagination="false">
        <span slot="action" slot-scope="text, record" class="action">
<!--          v-if="record.status == 0"-->
          <a-button size="small" type="primary" :disabled="record.status != 0||!record.isAudit" @click="showModal(record)" style="margin-right: 14px">审核</a-button>
          <a-button size="small" type="primary" :disabled="record.status!=2||record.number<=record.backNumber"  @click="applyBtn(record)">退回</a-button>
        </span>
      </my-table>
      <a-modal v-model="visible" title="审核" centered :maskClosable="false" :closable="false">
        <a-form-model :label-col="{ span: 4 }" :wrapper-col="{ span: 17 }" :model="form">
          <a-form-item label="审核状态:">
            <a-radio-group name="radioGroup" v-model="form.examineState" style="margin-left: 30px">
              <a-radio :value="true" style="color: #fff"> 通过</a-radio>
              <a-radio :value="false" style="margin-left: 50px; color: #fff">
                驳回
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="审核意见:">
            <a-textarea
                placeholder="请输入审核意见"
                :rows="6"
                v-model="form.examineCon"
                style="margin-left: 30px; color: #fff"
            />
          </a-form-item>
        </a-form-model>
        <template slot="footer">
          <a-button class="btn" type="primary" @click="confirmSend">确认</a-button>
          <a-button class="btn" type="info" @click="cancelBtn">取消</a-button>
        </template>
      </a-modal>
      <div class="bottompage">
        <div class="page-box">
          <a-pagination :show-total="(total) => `共 ${total}条记录`" v-model="page.currentPage" :total="total" :defaultPageSize="page.pageSize" :item-render="itemRender" @change="pagechangeFn"/>
        </div>
      </div>
    </div>
    <!--    退回弹窗-->
    <a-modal v-model="isshow_apply" title="退回信息" @ok="applySave" @cancel="applyCancel" centered width="40%" :destroyOnClose="true">
      <a-form-model ref="ruleForm" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" :model="returnFrom" layout="horizontal" :colon="false">
        <a-form-model-item label="退回数量" prop="number">
          <a-input-number v-model="returnFrom.number" :max="returnData.max" :min="0" :step="1" :precision="0"/>
<!--          {{ colProps  }}-->
        </a-form-model-item>
        <a-form-model-item label="退回说明" prop="notes">
          <a-textarea placeholder="请输入退回说明" :rows="4" v-model="returnFrom.notes"/>
        </a-form-model-item>
<!--        <a-row>-->
<!--          <a-col :span="20">-->
<!--            <a-button class="btn" type="primary" @click="applySave" style="margin-left: 300px">确认</a-button>-->
<!--            <a-button class="btn" type="danger" @click="applyCancel" style="margin-left: 90px">取消-->
<!--            </a-button>-->
<!--          </a-col>-->
<!--        </a-row>-->
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      returnData:{},
      returnFrom:{
        number:1,  // 输入量
        notes:"",  // 原因
      },
      isshow_apply: false,  // is退回弹窗
      moment,
      data: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          scopedSlots: {
            customRender: "name",
          },
          ellipsis: true,
          customRender: (text, record, index) =>
              `${(this.page.currentPage - 1) * this.page.pageSize + index + 1}`,

          align: "center",
          width: "75px",
        },
        {
          title: "物资名称",
          dataIndex: "goodsTypeInfoPo.name",
          align: "center"
        },
        {
          title: "物资型号",
          dataIndex: "goodsTypeInfoPo.version",
          align: "center"
        },
        {
          title: "申请人",
          dataIndex: "nickname",
          align: "center"
        },
        {
          title: "申请时间",
          dataIndex: "time",
          align: "center"
        },
        {
          title: "申请理由",
          dataIndex: "notes",
          align: "center"
        },
        {
          title: "申请数量",
          dataIndex: "number",
          align: "center"
        },
        {
          title: "退回数量",
          dataIndex: "backNumber",
          align: "center"
        },
        {
          title: "申核状态",
          dataIndex: "statusName",
          align: "center"
        },
        {
          title: "申核意见",
          dataIndex: "opinion",
        },
        {
          title: "操作",
          dataIndex: "",
          width:"180px",
          scopedSlots: {
            customRender: "action",
          },
          align: "center",

        },
      ],
      page:{
        currentPage: 1,
        pageSize: 10,
        searchKey:"",
        areaId: this.$user.deptId,
        status:undefined,
      },
      total: 0,
      send: {}, //模态框请求参数
      visible: false,
      form: {
        spareId: "",
        userId: "", //当前用户id
        examineCon: "",
        examineState: true,
      },
      rules: {
        number: [
          { required: true, message: '退回数量必填', trigger: 'blur' },
        ],
        notes: [{ required: true, message: '退回说明必填', trigger: 'blur' }],
      },
    };
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
              `selectedRowKeys: ${selectedRowKeys}`,
              "selectedRows: ",
              selectedRows
          );
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },

  mounted() {
    this.getdata();
    this.getId();
  },
  methods: {
    // 退回
    applyBtn(item) {
      console.log(item)
      item.max = item.number-item.backNumber;
      this.returnData = item;
        this.isshow_apply = true;
    },
    // 退回确认
    applySave(){
      let data = {
        id:this.returnData.id,
        goodsId: this.returnData.goodsId,
        number: this.returnFrom.number,
        userId: this.$user.id,
        notes: this.returnFrom.notes,
        areaId: this.returnData.areaId,
      };

      this.$api.backgoodsinfo(data).then((res) => {
        if(res.data.code===500){
          this.$message.info(res.data.errorMessage)
        }else if(res.data.code === 0){
          this.$message.info("操作成功");
          this.isshow_apply = false;
          this.returnData = {};
          this.returnFrom = {
            number:1,  // 输入量
            notes:"",  // 原因
          }
          this.getdata()
        }
      });
    },
    // 退回取消
    applyCancel() {
      this.isshow_apply = false;
      this.returnFrom = {
        number:1,  // 输入量
        notes:"",  // 原因
      };
      this.applyNumber = "";
      this.applyCon = "";
    },
    handleSubmit(){
      this.page.currentPage = 1;
      this.getdata()
    },
    //模态框
    showModal(data) {
      console.log(data);
      this.visible = true;
      this.getId();
      this.form.spareId = data.id;
    },
    //确认申领
    confirmSend() {
      var _this = this;
      let data = {
        id: this.form.spareId,
        opinion: this.form.examineCon,
        isAgree: this.form.examineState,
        userId: this.form.userId,
      };
      this.$api.wzshinfo(data).then((res) => {
        if (res.data.code === 0 && res.data.data) {
          _this.form = {
            spareId: "",
            userId: "", //当前用户id
            examineCon: "",
            examineState: true,
          };
          _this.getdata();
          _this.visible = false;
        } else {
          _this.$message.error(res.data.errorMessage);
        }
      });
    },
    //取消
    cancelBtn() {
      this.visible = false;
      this.form = {
        spareId: "",
        userId: "", //当前用户id
        examineCon: "",
        examineState: true,
      };
    },
    //获取当前用户和部门
    getId() {
      this.form.userId = this.$user.id;
    },
    //获取时间
    onChanges(date, dateString) {
      console.log(date, dateString);
      this.form.applyTime = moment(dateString).valueOf();
    },
    // 分页器
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a> 上一页 </a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.page.currentPage = page;
      this.getdata();
    },
    // 查询获取统计库存
    getdata() {
      console.log(this.page)
      this.$api.goodsApplyinfo(this.page).then((res) => {
        if (res.data.code === 0) {
          this.data = res.data.data.records;
          this.data.forEach(item => {
            item.time = moment(item.time).format("YYYY-MM-DD");
            switch (item.status){
              case 0 :
                item.statusName = "未审核";
                break
              case 1:
                item.statusName="审核未通过";
                break
              case 2:
                item.statusName = "审核通过";
                break
            }
            if (item.opinion == null) {
              item.opinion = "暂无";
            }
          });
          this.total = res.data.data.total;
        }else {
          this.$message.warning(res.data.errorMessage)
        }

      });
    },
  },
};
</script>
<style scoped src="../../../assets/style/warning.css"></style>
<style scoped lang="scss">
.action {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.disable {
  background-color: #bebebe;
}

#salvenote {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  .page-header{
    padding-top: 0;
    margin-bottom: 0;
  }
}

.solve-img {
  display: flex;
  justify-content: space-evenly;
}

#salvenote .solvebtn {
  margin-right: 10px;
  border: none;
  font-weight: 700;
  color: #2c6a5f;
}

#salvenote .ant-btn-danger {
  color: #1c2c2c;
  margin-right: 10px;
  background-color: #2c6a60;
  border: none;
  font-weight: 700;
}

::v-deep .ant-table-tbody > tr > td:nth-child(2) {
  padding: 0px;
  height: 60px;
}



.bottompage {
  margin-top: 12px;
  float: right;
}

#salvenote ::v-deep .ant-checkbox-inner {
  border: 2px solid #2e9685;
  background-color: rgba(140, 179, 174, 0.5) !important;
}

#salvenote .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0;
  background-color: rgba(30, 50, 48, 0.5);
  box-shadow: 0 0 10px 1px #188471 inset;
}


::v-deep .ant-radio-inner {
  background-color: rgba(181, 190, 190, 0.5);
  border-color: #2c6a5f;
  border-width: 1px;
}
</style>
